import React, { Component } from 'react';
// react中书写组件有2种方式
// 1.class
// 2.函数组件
class Home extends Component {
    constructor(props) {
        //class组件应该始终使用 props 参数来调用父类的构造函数。
        // 接受父类的属性
        super(props)
        console.log(props);
        this.state = {
            msg: '首页数据',
            obj: {
                name: '小杨'
            },
            arr: ['包子', '豆浆', '胡辣汤'],
            arrObj: [
                { id: 1, title: '四季如春' },
                { id: 2, title: '马到成功' },
                { id: 3, title: '招财进宝' },
            ],
            listDatas: [
                {
                    id: 1, gift: '电脑', children: [
                        { id: 11, gift: '小米电脑' },
                        { id: 12, gift: '华为电脑' },
                        { id: 13, gift: '联想电脑' }
                    ]
                },
                {
                    id: 2, gift: '汽车', children: [
                        { id: 21, gift: '奥迪A6' },
                        { id: 22, gift: '宝马7系' },
                        { id: 23, gift: '奔驰e300' }
                    ]
                },
            ],
        }
    }

    render() {
        return (
            <div>
                <h2>首页组件</h2>
                <p>{this.state.msg}</p>
                <p>{this.state.obj.name}</p>
                <h2>数组遍历</h2>
                <ul>
                    {
                        this.state.arr.map((item, index) => {
                            return (
                                <li key={index}>{item}-{index}</li>
                            )
                        })
                    }
                </ul>
                <h3>数组对象的遍历</h3>
                <ul>
                    {
                        this.state.arrObj.map((item, index) => {
                            return (
                                <li key={item.id}>{item.title}-{index}</li>
                            )
                        })
                    }
                </ul>
                <h2>嵌套数组对象遍历</h2>
                <ul>
                    {
                        this.state.listDatas.map((item, index) => {
                            return (
                                <li key={item.id}>
                                    <h3>{item.gift}</h3>
                                    <ul>
                                        {
                                            item.children.map((value, index) => {
                                                return (
                                                    <li key={value.id}>{value.gift}-{index}</li>
                                                )

                                            })
                                        }
                                    </ul>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Home;